<div class="col-xs-3 col-md-2 ng-scope">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
            <li class="active"><a href="#grid" data-toggle="tab">Grid</a></li>
            <li><a href="#legend" data-toggle="tab">Legend</a></li>
            <li><a href="#ctgAxis" data-toggle="tab">Category Axis</a></li>
            <li><a href="#valAxis" data-toggle="tab">Value Axis</a></li>
            <li><a href="#ext" data-toggle="tab">Ext</a></li>
        </ul>
</div>
<div class="col-xs-9 col-md-10 ng-scope">
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="grid">
                <!-- ngInclude: undefined -->
                <!-- <ng-include src="'org/cboard/view/config/chart/options/common/grid.html'" class="ng-scope">
                    <form class="form-horizontal ng-pristine ng-valid ng-scope">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="curWidget.config.option.gridCustom" ng-init="curWidget.config.option.gridCustom ? null : curWidget.config.option.gridCustom=false" class="ng-pristine ng-untouched ng-valid"> Customize
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Top</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.gridTop" placeholder="Input 'n% ' or integer number as pixel" ng-disabled="!curWidget.config.option.gridCustom" disabled="disabled">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Bottom</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.gridBottom" placeholder="Input 'n% ' or integer number as pixel" ng-disabled="!curWidget.config.option.gridCustom" disabled="disabled">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Left</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.gridLeft" placeholder="Input 'n% ' or integer number as pixel" ng-disabled="!curWidget.config.option.gridCustom" disabled="disabled">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Right</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.gridRight" placeholder="Input 'n% ' or integer number as pixel" ng-disabled="!curWidget.config.option.gridCustom" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </form>
                </ng-include> -->
                <app-grid></app-grid>
            </div>
            <div class="tab-pane" id="legend">
                <!-- ngInclude: undefined -->
                <!-- <ng-include src="'org/cboard/view/config/chart/options/common/legend.html'" class="ng-scope">
                    <form class="form-horizontal ng-pristine ng-valid ng-scope">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="curWidget.config.option.legendShow" ng-init="curWidget.config.option.legendShow ? null : curWidget.config.option.legendShow=true" class="ng-pristine ng-untouched ng-valid"> Show Legend
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="col-md-4 control-label">X</label>
                                <div class="col-md-8">
                                    <select class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.legendX" ng-disabled="!curWidget.config.option.legendShow"><option value="? undefined:undefined ?"></option>
                                        <option value="left">left</option>
                                        <option value="right">right</option>
                                        <option value="center">center</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="col-md-4 control-label">Y</label>
                                <div class="col-md-8">
                                    <select class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.legendY" ng-disabled="!curWidget.config.option.legendShow"><option value="? undefined:undefined ?"></option>
                                        <option value="top">top</option>
                                        <option value="bottom">bottom</option>
                                        <option value="center">center</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="col-md-4 control-label">Orient</label>
                                <div class="col-md-8">
                                    <select class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.legendOrient" ng-disabled="!curWidget.config.option.legendShow"><option value="? undefined:undefined ?"></option>
                                        <option value="horizontal">horizontal</option>
                                        <option value="vertical">vertical</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </ng-include> -->
                <app-legend></app-legend>
            </div>
            <div class="tab-pane" id="ctgAxis">
                <!-- ngInclude: undefined -->
                <!-- <ng-include src="'org/cboard/view/config/chart/options/common/categoryAxis.html'" class="ng-scope">
                    <form class="form-horizontal ng-pristine ng-valid ng-scope">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Interval</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.ctgLabelInterval">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-md-3 control-label">Rotate</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.option.ctgLabelRotate">
                                </div>
                            </div>
                        </div>
                    </form>
                </ng-include> -->
                <app-ctgAxis></app-ctgAxis>                
            
            </div>
            <div class="tab-pane" id="valAxis">
                <!-- <form class="form-horizontal ng-pristine ng-valid">
                    <div class="row ng-scope" ng-repeat="v in curWidget.config.values">
                        <div class="form-group col-md-6">
                            <label class="col-md-4 control-label ng-binding" style="padding: 7px 2px">0-轴名</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="v.name">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label class="col-md-4 control-label ng-binding" style="padding: 7px 2px">0-Min</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="v.min">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label class="col-md-4 control-label ng-binding" style="padding: 7px 2px">0-Max</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control ng-pristine ng-untouched ng-valid" ng-model="v.max">
                            </div>
                        </div>
                    </div>
                </form> -->
                <app-valAxis></app-valAxis>
            </div>
            <div class="tab-pane" id="ext">
                    <!-- <form class="form-horizontal ng-pristine ng-valid">
                        <div class="row">
                            <div class="form-group col-md-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="curWidget.config.option.dataZoom" ng-init="curWidget.config.option.dataZoom=false" class="ng-pristine ng-untouched ng-valid"> Show DataZoom
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-4 control-label">Value Orient</label>
                                <div class="col-md-8">
                                    <select class="form-control ng-pristine ng-untouched ng-valid" ng-model="curWidget.config.valueAxis" ng-init="curWidget.config.valueAxis ? null : curWidget.config.valueAxis='vertical'">
                                        <option value="horizontal">horizontal</option>
                                        <option value="vertical">vertical</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form> -->
                <app-ext></app-ext>
            </div>
        </div>
</div>